<script setup lang="ts">
import router from '@/router';
import { ElMessage } from 'element-plus';
import { defineProps, onMounted, ref } from 'vue';
import { obsClient } from "@/utils/obs"
const avatar = ref(null); // 声明响应式引用
let avatar_id = -1;
const props = defineProps({
    comment: Object
});
const toThisUser = () => {
    router.push({
    path: "/personalinfo",
      query: {
        userId: props.post.userId,
      }
    });
} 
// 获取头像
const isHadAva = ref(false);
const requestAvatar = (id) => {
  const obs = obsClient; 
    obs.listObjects({
      Bucket: 'job-linker',
      Prefix: "personal/avatar/" + id + '/',
    }).then(result => {
      console.log("requestAvatar");
      console.log(result);
      if (result.CommonMsg.Status < 300 && result.InterfaceResult.Contents && result.InterfaceResult.Contents.length > 0) {
        let contents = result.InterfaceResult.Contents
        let element = contents[0]
        let index = 0
        for (index = contents.length - 1; index >= 0; index--) {
          element = contents[index]
          if (element.Key.endsWith('.jpeg') && element.Key.startsWith('personal/avatar/' + id + '/')) {
            break
          }
        }
        if (index<0) {
          return
        }
        avatar_id = index + 1
        let path = element.Key
        console.log("avatar_id",path)
        return obsClient.getObject({
          Bucket: 'job-linker',
          Key: path,
          SaveByType: 'arraybuffer',
        }).then(result => {
          if (result.CommonMsg.Status < 300) {
            const arrayBuffer = result.InterfaceResult.Content;
            const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
            const url = URL.createObjectURL(blob);
            avatar.value = url; // 更新响应式引用
            isHadAva.value = true;
            console.log("=================================",avatar.value)
          } 
        });
      }
    }).catch(error => {
      console.error('请求头像列表时发生错误：', error);
      ElMessage({
      message: '请求头像列表失败。',
      type: 'error',
    });
  });
};

onMounted(()=>{
    requestAvatar(props.comment.userId)
})
</script>
<template>
    <div class="comment-unit">
        <div class="comment-header">
            <el-avatar v-if="isHadAva" :src="avatar" @click="toThisUser"></el-avatar> <!-- 使用用户首字母作为头像 -->
            <el-avatar v-else @click="toThisUser"> {{ $props.comment.username.charAt(0)}} </el-avatar>
            <span class="username">{{ $props.comment.username }}</span>
        </div>
        <div class="comment-content">
            {{ $props.comment.content }}
        </div>
        <div class="comment-footer">
            <span class="time">{{ $props.comment.time }}</span> 
        </div>
    </div>
</template>
  

  
<style scoped>
.comment-unit {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
  
.comment-header {
    display: flex;
    align-items: center;
}
  
.el-avatar {
    margin-right: 10px;
}
  
.username {
    font-weight: bold;
}
  
.comment-content {
    margin: 5px 0;
    display: flex;
    align-items: center;
    max-width: 100%;
    text-overflow: ellipsis; /* 显示省略号 */
    -webkit-line-clamp: 3; /* 显示的行数 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}
  
.comment-footer {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    color: #666;
}
</style>